$(document).ready(function () {


    layui.use(function () {

        var layer = layui.layer;

        var laydate = layui.laydate;

        laydate.render({
            elem: "#tool-customize",
            range: true
            , done: function (value, date, endDate) {
                queryParams = {
                    "type": 3,
                    "beginTime": value.split(' - ')[0],
                    "endTime": value.split(' - ')[1]
                }
                $('#tool-year').html('年度')
                $('#tool-month').html('月度')
                initChart()

            }
        });
        laydate.render({
            elem: "#tool-year",
            type: 'year'
            , value: new Date()
            , done: function (value, date, endDate) {
                queryParams = {
                    "type": 2,
                    "year": value
                }
                $('#tool-customize').html('自定义')
                $('#tool-month').html('月度')
                initChart()
            }
        });
        laydate.render({
            elem: "#tool-month",
            type: 'month'
            , done: function (value, date, endDate) {
                queryParams = {
                    "type": 1,
                    "year": value.split('-')[0],
                    "month": value.split('-')[1]
                }
                $('#tool-customize').html('自定义')
                $('#tool-year').html('年度')
                initChart()
            }
        });

        queryParams = {
            "type": 2,
            "year": $("#tool-year").html()
        }

        initSubMenu();
        initChart()

    });
})

var queryParams

function initChart() {
    drawBar()
    queryList()
    queryCount()
}

function drawPie(data) {


    var total = data.total;

    let legendData = [
        {
            name: "优秀",
            value: data.excellent,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "良好",
            value: data.good,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "合格",
            value: data.pass,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
        {
            name: "不合格",
            value: data.fail,
            icon: 'path://M100,0 L41.22,180.90 L195.10,69.09 L4.89,69.09 L158.77,180.90 z',
        },
    ]

    var option = {
        animation: true,
        title: {
            "subtext": '   训练成绩统计',
            "subtextStyle": {
                "color": "#D2EAEE",
                "fontSize": 12,
                "align": "center",
            },
        },
        legend: {
            "left": "center",
            "textStyle": {
                "color": "#000",
                "fontSize": 14
            },
            // "icon": "circle",
            itemWidth: 14,
            itemHeight: 14,
            "right": "0",
            "bottom": "10%",
            // "padding": [30, 60],
            // "itemGap": 10,
            textStyle: {
                rich: {
                    name: {
                        width: 100,
                        color: "#D2EAEE"
                    },
                    bfb: {
                        color: "#D2EAEE"
                    },
                    num: {
                        width: 50,
                        color: "#D2EAEE"
                    }
                }
            },
            data: legendData,
            formatter: function (params) {
                const list = legendData.filter((val) => val.name == params)[0]
                let legendHtml = '';
                legendHtml = (`{name|${params}}{bfb|${total == 0 ? '-' : (list.value / (total) * 100).toFixed(0) + '%'}}{num|${" / " + list.value}}{bfb|}`)
                return legendHtml
            },
        },
        series: [{
            "type": "pie",
            "center": ["50%", "40%"],
            "radius": ["30%", "43%"],
            "color": ["#45F5C1", "#F7F948", "#58D0FF", "#FF6161"],
            "startAngle": 135,
            "labelLine": {
                "normal": {
                    "length": 25
                }
            },
            "label": {
                "normal": {
                    show: false
                }
            },
            "data": legendData
        }]
    }
    var mychart = echarts.init(document.getElementById('top-right'));
    mychart.setOption(option);
}


// 切换图表类型
$('.left-chart-tool>span').click(function (e) {
    $(e.currentTarget).addClass('active').siblings().removeClass('active');
    

    queryParams.trainType=$(e.currentTarget).data().type
    drawBar()

})

function drawBar() {



    new AjaxChain()
        .setUrl('/train/score/person/time/count')
        .setData(
            JSON.stringify(queryParams)
        )
        .setMethod('post')
        .then(data => {
            

            var xData = [], yData = [], passData = []

            $.each(Object.values(data)[0], function (key, value) {
                xData.push(value.date)
                yData.push(value.total)
                passData.push(value.passRate.split('%')[0] / 100)
            })


            var myChart = echarts.init(document.getElementById('left-chart'));

            var option = {
                color: ['#80A0FF'],
                legend: {
                    x: '2%',
                    show: true,
                    textStyle: {
                        color: '#E2F1FF'
                    }
                },
                grid: {
                    left: '2%',
                    right: '3%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#296085',
                        }
                    },
                    data: xData
                },
                yAxis: [{
                    type: 'value',
                    name: '训练次数',
                    minInterval: 1,
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                }, {
                    type: 'value',
                    name: '合格率',
                    axisLabel: {
                        color: "#BDE4FF"
                    },
                    axisLabel: {
                        formatter: function (p) {
                            return p * 100 + '%'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#296085',
                            type: "dashed"
                        }
                    }
                }],
                series: [
                    {
                        name: '次数',
                        type: 'bar',
                        data: yData,
                        barWidth:15,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'hsla(175, 97.20%, 57.50%, 0.70)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(81, 189, 180, 0)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    },
                    {
                        name: '合格率',
                        data: passData,
                        type: 'line',
                        yAxisIndex: 1,
                        lineStyle: {
                            shadowColor: 'rgba(20, 20, 20, 0.9)',
                            shadowBlur: 3,
                            shadowOffsetX: 3,
                            shadowOffsetY: 2,
                        },
                    }
                ]
            };


            myChart.setOption(option);


        })
        .send();



}



function queryList() {
    new AjaxChain()
        .setUrl('/train/score/person/best/count')
        .setData(
            JSON.stringify(
                queryParams
            )
        )
        .setMethod('post')
        .then(data => {

            $('.toolle-bottom')
                .empty()
                .append(
                    data.reduce((x, y) => {
                        let temp = new ST().project(1).find(function (activity) {
                            return activity.type === y.trainType;
                        });

                        return x + `<div>
                                <li>${temp.name}</li>
                                <li>${y.minTime}</li>
                                <li>${y.avgTime}</li>
                                <li>${y.total}</li>
                                <li>${y.total - y.fail}</li>
                                <li>${y.total == 0 ? '-' : ((y.total - y.fail) / (y.total) * 100).toFixed(0) + '%'}</li>
                            </div>`
                    }, `<div><li>项目类型</li><li>最好成绩</li><li>平均成绩</li><li>训练次数</li><li>合格次数</li><li>合格率</li></div>`)
                )

        })
        .send();
}


function queryCount() {


    new AjaxChain()
        .setUrl('/train/score/person/pass/time/count')
        .setData(
            JSON.stringify(queryParams)
        )
        .setMethod('post')
        .then(data => {
            if (!data) {
                data = {
                    "total": 0,
                    "excellent": 0,
                    "good": 0,
                    "pass": 0,
                    "fail": 0,
                    "passRate": 0
                }
            }

            $('.left-number').empty().append(
                `<div class="number-item">
                        <span>${data.total}</span>
                        <div>训练次数</div>
                    </div>
                    <div class="number-item">
                        <span>${data.total - data.fail}</span>
                        <div>合格次数</div>
                    </div>
                    <div class="number-item">
                        <span>${data.passRate}</span>
                        <div>合格率</div>
                </div>`
            )

            drawPie(data)

        })
        .send();

}